<!--
 * @Description: 节点操作复制删除控件
-->
<template>
  <div class="copy-delete-box">
    <a class="copy" :class="activeClass" @click.stop="handleCopy">
      <Icon icon="ant-design:copy-outlined" />
    </a>
    <a class="delete" :class="activeClass" @click.stop="handleDelete">
      <Icon icon="ant-design:delete-outlined" />
    </a>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue';
import { IVFormComponent } from '../../../typings/v-form-component';
import { remove } from '../../../utils';
import { useFormDesignState } from '../../../hooks/useFormDesignState';
import Icon from '@/components/Icon/Icon.vue';

export default defineComponent({
  name: 'FormNodeOperate',
  components: {
    Icon,
  },
  props: {
    schema: {
      type: Object,
      default: () => ({}),
    },
    currentItem: {
      type: Object,
      default: () => ({}),
    },
  },
  setup(props) {
    const { formConfig, formDesignMethods } = useFormDesignState();
    const activeClass = computed(() => {
      return props.schema.key === props.currentItem.key
        ? 'active'
        : 'unactivated';
    });
    /**
     * 删除当前项
     */
    const handleDelete = () => {
      const traverse = (schemas: IVFormComponent[]) => {
        schemas.some((formItem, index) => {
          const { component, key } = formItem;
          // 处理栅格和标签页布局
          ['CollapseContainer', 'Tabs'].includes(component) &&
            traverse(formItem.children);
          if (key === props.currentItem.key) {
            let params: IVFormComponent =
              schemas.length === 1
                ? { component: '' }
                : schemas.length - 1 > index
                ? schemas[index + 1]
                : schemas[index - 1];
            formDesignMethods.handleSetSelectItem(params);
            remove(schemas, index);
            return true;
          }
        });
      };
      traverse(formConfig.value!.schemas);
    };

    const handleCopy = () => {
      formDesignMethods.handleCopy();
    };
    return { activeClass, handleDelete, handleCopy };
  },
});
</script>
